import { HTMLAttributes } from "react";
import { clsx } from "clsx";
import { Avatar } from "@/ui/cpts/std/Avatar";
import { XHSUser } from "@common/models";
import { Wrapper } from "./styles";

interface MessageCardProps extends HTMLAttributes<HTMLDivElement> {
  indentLevel?: number; // 缩紧级别，0 - 不锁进
  sendAs: XHSUser;
}
export function MessagePlaceholderCard(props: MessageCardProps) {
  const { sendAs, indentLevel, className, ...restParams } = props;
  return (
    <Wrapper
      className={clsx("message-card", className, {
        [`indent-level-${indentLevel}`]: indentLevel,
      })}
      {...restParams}
      $indentLevel={indentLevel}
    >
      <div className={"message-card__summary"}>
        <div className={"message-card__author"}>
          <Avatar
            className={"message-card__author-avatar"}
            src={sendAs.avatar}
            alt={"CN"}
          />
          {sendAs.nickname}
        </div>
        <div className={"message-card__create-time"} />
        <div className={"message-card__location"} />
        <div className={"message-card__action-list"} />
      </div>

      <div className={"message-card__content holder-for-reply"}>
        回复将会出现在这里
      </div>
    </Wrapper>
  );
}
